import React,{useState, useEffect } from 'react'
import axios from 'axios'
import { useRouter } from 'next/router';
import { Row, Col, Spin } from 'antd'  
import RightAids from '../rightAids/rightAids'

import marked from 'marked'
import 'highlight.js/styles/monokai-sublime.css'
import './contentItem.scss'

import Header from '../../components/Header'
const ContentItem = (props) => {
  // const [ ArticleId , setArticleId ] = useState( router.query.Id);
  const [ newhtml , setNewhtml ] = useState( '');
  // let newhtml = marked(mylist.data[0].article_content)
  // const router = useRouter(); //初始化路由
  const [spinning, setSpinning] = useState(false); // loading
  useEffect(() => {
    getInitialProps()
  },[])
  const getInitialProps = ()=> {
    setSpinning(true)
    axios(`http://127.0.0.1:7001/default/getArticleById/${props.url.query.Id}`).then(
      (res)=>{
        setNewhtml(marked(res.data.data[0].article_content))
        setSpinning(false)
      }
    )
  }
  return (
    <div className="appBox">
      <Header />
      <Spin tip="Loading..." spinning={ spinning }>
        <Row className="left-nav" type="flex" justify="space-around">
          {/* <Col xs={0} sm={3} md={2} lg={3} xl={3}>
            <LeftNav />
          </Col> */}
          <Col xs={22} sm={18} md={15} lg={15} xl={16} className="contentItem" style={{background:'#fff',padding:'5px 8px',boxSizing:'border-box',maxHeight:'calc(100vh - 51px)',overflowY:'scroll'}}>
            <div contentEditable='true' dangerouslySetInnerHTML = {{__html:newhtml}}></div>
          </Col>
          <Col  xs={0} sm={4} md={7} lg={7} xl={6}>
            <RightAids />
          </Col>
        </Row>
      </Spin>
    </div>
  )
}
// Content.propTypes = {
//   mylistData: PropTypes.array.isRequired,
// }
// ContentItem.getInitialProps = async (context) => {
//   const promise = new Promise((resolve)=>{
    
//     axios(`http://127.0.0.1:7001/default/getArticleById/${context.query.Id}`).then(
//       (res)=>{
//         resolve(res.data)
//       }
//     )
//   })
//   return await promise
// }
export default ContentItem
